<template>
    <div>
        <el-button color="#1fb394" :dark="isDark" :icon="Search">搜索</el-button>


        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="num" label="序号" width="100" />
            <el-table-column prop="ordernum" label="用户名" width="180" />
            <el-table-column prop="name" label="昵称" width="150" />
            <el-table-column prop="truename" label="真实姓名" width="150" />
            <el-table-column prop="phone" label="手机号" width="150" />
            <el-table-column prop="discountAmount" label="来源" width="150" />
            <el-table-column prop="coinDeduction" label="加达币" width="150" />
            <el-table-column prop="paymentAmount" label="邀请人" width="150" />

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleView(scope.row)" :icon="View">消费明细</el-button>
                    <el-button size="small" @click="handleFinish(scope.row)" :icon="View">
                        下级用户
                    </el-button>
                    <el-button size="small" @click="handleCancel(scope.row)" :icon="View">
                        下级消费明细
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script setup>
import { Search, View } from '@element-plus/icons-vue'

const tableData = [
    {
        num: '1',
        ordernum: '2025061311465621937',
        name: '',
        truename: '洗车',
        phone: 15633096490,
        discountAmount: 100.00,
        coinDeduction: 10,
        paymentAmount: 890.00,

    },
    {
        num: '2',
        ordernum: '2025061311465621937',
        name: '',
        truename: '洗车',
        phone: 15633096490,
        discountAmount: 100.00,
        coinDeduction: 10,
        paymentAmount: 890.00,

    },
    {
        num: '3',
        ordernum: '2025061311465621937',
        name: '',
        truename: '洗车',
        phone: 15633096490,
        discountAmount: 100.00,
        coinDeduction: 10,
        paymentAmount: 890.00,

    },
    {
        num: '4',
        ordernum: '2025061311465621937',
        name: '',
        truename: '洗车',
        phone: 15633096490,
        discountAmount: 100.00,
        coinDeduction: 10,
        paymentAmount: 890.00,

    },
]

const handleView = (row) => {
    console.log('查看订单：', row);
    // 这里可以添加查看订单详情的逻辑，比如弹出模态框等
};

const handleFinish = (row) => {
    console.log('完成订单：', row);
    // 这里可以添加完成订单的逻辑，比如发送请求更新订单状态等
    row.orderStatus = '已完成';
    row.finishTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
};

const handleCancel = (row) => {
    console.log('取消订单：', row);
    // 这里可以添加取消订单的逻辑，比如发送请求更新订单状态等
    row.orderStatus = '已取消';
};
</script>

<style lang="scss" scoped>
.order-table-container {
    padding: 20px;
}

.search-input {
    margin-bottom: 10px;
}

.status-unfinished {
    color: #75baff;
}

.status-finished {
    color: #ff0000;
}
</style>